<?php include THEMES_PATH . 'public/before_body2.phtml';?>
<link href="/statics/front/css/group-buying.css" rel="stylesheet">
</head>
<body>
<?php include THEMES_PATH . 'public/header2.phtml';?>
<div class="mt1x mb2x align-center main-width head">
  <strong><?php echo L('GROUP_ORDERS');?></strong>
  <p class="mt1x text"><?php echo L('GROUP_ORDERS_1');?><?php echo L('GROUP_ORDERS_2');?></p>
</div>
<div class="banner">
  <img src="/statics/front/images/group-buying/group/banner.jpg" alt="团购横幅">
  <div class="banner-inner js-banner-inner">
    <dl class="clearfix">
      <dt class="align-center">
        <strong><?php echo L('Why_OWNONLY_');?></strong>
        <span>
          <i class="line"></i>
          <i class="fa fa-heart-o"></i>
          <i class="line"></i>
        </span>
      </dt>
      <dd class="img-box">
        <img src="/statics/front/images/group-buying/group/suit.png" alt="西装" style="right:30px;left:auto;">
      </dd>
      <dd class="current">
        <i class="fa fa-pencil"></i>
        <div class="pull-right">
          <strong><?php echo L('GROUP_tips_11');?></strong>
          <p><?php echo L('GROUP_tips_12');?></p>
        </div>
        <i class="triangle-left"></i>
        <i class="triangle-left triangle-left-1"></i>
      </dd>
      <dd>
        <i class="fa fa-calendar-o"></i>
        <div class="pull-right">
          <strong><?php echo L('GROUP_tips_21');?></strong>
          <p><?php echo L('GROUP_tips_22');?></p>
        </div>
        <i class="triangle-left"></i>
        <i class="triangle-left triangle-left-1"></i>
      </dd>
      <dd>
        <i class="fa ruler"><img src="/statics/front/images/group-buying/wedding/ruler.png" alt="ruler"></i>
        <div class="pull-right">
          <strong><?php echo L('GROUP_tips_31');?></strong>
          <p><?php echo L('GROUP_tips_32');?></p>
        </div>
        <i class="triangle-left"></i>
      </dd>
    </dl>
  </div>
</div>
<div class="bg tabs js-tabs">
  <ul class="clearfix auto align-center">
    <li class="col-md-6"><span class="current"><?php echo L('HOW_IT_WORKS');?></span></li>
    <li class="col-md-6"><span><?php echo L('MAKE_MONEY_BY_REFERRING_US');?></span></li>
  </ul>
</div>
<div class="clearfix panels js-panels">
  <div class="panel show">
    <ul class="clearfix padding-layout">
      <li class="col-md-6 col-md-push-1"><img src="/statics/front/images/group-buying/group/pic1.jpg" /></li>
      <li class="col-md-6">
        <h3 class="normal font-2x line-height-1"><?php echo L('GROUP_tips_a_1');?></h3>
        <p class="text"><?php echo L('GROUP_tips_a_11');?><br/><?php echo L('GROUP_tips_a_12');?></p>
      </li>
    </ul>
    <ul class="clearfix bg-f4f4f4 padding-layout">
      <li class="col-md-6">
        <h3 class="align-right normal font-2x line-height-1"><?php echo L('GROUP_tips_a_2');?></h3>
        <p class="text"><?php echo L('GROUP_tips_a_21');?></p>
      </li>
      <li class="col-md-5 col-md-push-1"><img src="/statics/front/images/group-buying/group/pic2.jpg" /></li>
    </ul>
    <ul class="clearfix padding-layout" style="background-color:#e6eef0;">
      <li class="col-md-6 col-md-push-1"><img src="/statics/front/images/group-buying/group/pic3.jpg" /></li>
      <li class="col-md-5">
        <h3 class="normal font-2x line-height-1"><?php echo L('GROUP_tips_a_3');?></h3>
        <p class="text"><?php echo L('GROUP_tips_a_31');?></p>
      </li>
    </ul>
    <ul class="clearfix bg-f4f4f4 padding-layout">
      <li class="col-md-6 align-right">
        <h3 class="normal font-2x line-height-1"><?php echo L('GROUP_tips_a_4');?></h3>
        <p class="align-left text"><?php echo L('GROUP_tips_a_41');?><br /><?php echo L('GROUP_tips_a_42');?></p>
      </li>
      <li class="col-md-5 col-md-push-1"><img src="/statics/front/images/group-buying/group/pic4.jpg" /></li>
    </ul>
    <div class="align-center padding-layout" style="background-color:#4a4a4a;">
      <button class="btn btn-reverse btn-large btn-order js-order-btn">联系我们</button>
      <p class="hide">If you’re a business or an individual looking to resell our products or have a business relationship with us, then please visit our partner page.</p>
    </div>
  </div>
  <div class="panel">
    <p class="align-center overview"><?php echo L('Wedding_Group_Order_info');?></p>
    <form id="contact-form" class="center-block field-box" style="max-width:650px;width:50%;">
      <label><em><?php echo L('Your_Name');?>: </em><input type="text" name="name" id="contact_name"/></label>
      <label><em><?php echo L('Your_Phone');?>: </em><input type="text" name="phone" id="contact_phone"/></label>
      <label><em><?php echo L('Your_Email');?>: </em><input type="text" name="email" id="contact_email" /></label>
      <label class="textarea-label"><em><?php echo L('Message_For_Us');?></em><textarea name="message" id="contact_message" class="no-border"></textarea></label>
      <button type="button" class="mt1x btn btn-middle js-submit" data-type="group_contact"><?php echo L('submit');?></button>
    </form>
  </div>
</div>
<template class="group-order-tpl">
  <h3 class="align-center black"><?php echo L('GROUP_ORDER_CONTACT');?></h3>
  <iframe id="upload_target" name="upload_target" src="/groupBuying/formpost" style="width:0;heigth:0;overflow:hidden;border:0;position:absolute;left:-500px;"></iframe>
  <form id="group-order-form" class="field-box" name="group" enctype="multipart/form-data" action="/groupBuying/formpost" method="post"  target="upload_target">
    <label><em><?php echo L('Your_Name');?>: </em><input type="text" name="name" id="wedding_name" /></label>
    <label><em><?php echo L('Your_Email');?>: </em><input type="text" name="email" id="wedding_email" /></label>
    <label><em><?php echo L('Your_Phone');?>: </em><input type="text" name="phone" id="wedding_phone" /></label>
    <label class="align-left no-border"><input type="checkbox" id="wedding_call_back" style="margin-right:5px;vertical-align:middle;" /><?php echo L('call_back');?></label>
    <div class="select-box">
      <em style="width:100%;"><?php echo L('Group_Order_Size');?></em>
      <div class="select-widget">
        <i></i>
        <span>3-10</span>
        <select name="formalCount" id="wedding_formalCount" autocomplete="off">
          <option value="3-10" selected>3-10</option>
          <option value="11-20">11-20</option>
          <option value="21-30">21-30</option>
          <option value="31-50">31-50</option>
          <option value="51+">51+</option>
        </select>
      </div>
      <?php echo L('Minimum_Order');?>
    </div>
    <label class="textarea-label"><em><?php echo L('Message_For_Us_optional');?>: </em><textarea id="wedding_message" class="no-border"></textarea></label>
    <label><?php echo L('Upload_Files');?><input class="" type="file" name="file" /></label>
    <input type="hidden" name="type" value="group" />
    <p class="align-center"><button type="button" class="btn btn-middle js-submit" data-type="group" style="width:70%;"><?php echo L('submit');?></button></p>
  </form>
</template>
<script src="/statics/front/js/plugins/jquery.lazyload.js"></script>
<script>
$(function () {
  $(".js-order-btn").popupBox({
    quickClose: true,
    content: function () {
      return $(".group-order-tpl").html();
    }
  });

  if (!unifyMobileDesktop.isSupportTouch()) {
    $('.js-banner-inner').on('mouseover', 'dd', function() {
      if ($(this).index() !== 1) {
        $(this).addClass('current').siblings().removeClass('current');
      }
    });
  }

  /*定义表单提交方法*/
  var $contactForm = $('#contact-form'),
      submitForm = function (thisForm,type) {
        var name = '',
            email = '',
            phone = '',
            call_back = 0,
            formalCount = 1,
            wedding_date = '',
            message = '';
        if (type == 'group_contact') {
          name = $('#contact_name').val();
          email = $('#contact_email').val();
          message = $('#contact_message').val();
        } else if (type == 'group') {
          $('form[name="group"]').submit();
          return;
          name = $('#wedding_name').val();
          email = $('#wedding_email').val();
          phone = $('#wedding_phone').val();
          call_back = $('#wedding_call_back').is(':checked') ? 1 : 0;
          wedding_date = $('#wedding_date').val();
          formalCount = $('#wedding_formalCount').val();
          message = $('#wedding_message').val();
        } else {
          return false;
        }

        $.ajax({
          type: 'POST',
          url: "/groupBuying/formpost",
          data: {
            'type': type,
            'name': name,
            'email': email,
            'phone': phone,
            'call_back': call_back,
            'wedding_date': wedding_date,
            'formalCount': formalCount,
            'message': message
          },
          cache: false,
          success: function(res){
            var _tips = "<?php echo L('msg_submit_is_successful')?>";
            if (res == 1) {
              thisForm[0].reset();
            } else{
              _tips = "<?php echo L('msg_submit_is_failure')?>";
            }
            $("p.tips")[0] && $("p.tips").remove();
            thisForm.find('.js-submit').parent().append("<p class='align-center tips'>" + _tips + "</p>");
          },
          error: function () {
            var _tips = "<?php echo L('msg_submit_is_failure')?>";
            $("p.tips")[0] && $("p.tips").remove();
            thisForm.find('.js-submit').parent().append("<p class='align-center tips'>" + _tips + "</p>");
          }
        });
      };

  /*切换tab页*/
  $('.js-tabs').on('click', 'li', function () {
    var $self = $(this);
    $self.find("span").addClass("current").end().siblings().find("span").removeClass("current");
    $('.js-panels').find(".panel").eq($self.index()).addClass('show').siblings().removeClass('show');
  });

  /*select*/
  $(document.body).on('change',"select", function() {
    $(this).prev().text($(this).val());
  });

  /*提交表单事件*/
  $(document.body).on('click',".js-submit", function() {
    var $self = $(this);
    var _type = $self.data('type');
    if(_type == "group"){
      /*团单页面表单*/
      var $groupOrderForm = $self.closest('form');
      $groupOrderForm.validate({
        errorElement: 'p',
        submitHandler: function(form) {
          form.submit();
        },
        errorPlacement: function(error, element) {
          element.after(error);
        },
        rules: {
          name: 'required',
          email: {
            required: true,
            email: true
          },
          phone: 'required',
          date: 'required'
        },
        messages: {
          name: "<?php echo L('refer_yname_validate');?>",
          email: {
            required: "<?php echo L('refer_yemail_validate');?>",
            email: "<?php echo L('refer_yemail_validate');?>"
          },
          phone: "<?php echo L('pleaseinputphone');?>",
          date: "<?php echo L('Choose_date');?>"
        }
      });
    }
    if($self.closest('form').valid()){
      submitForm($self.closest('form'),_type);
    }
  });

  /*合作表单验证*/
  $contactForm.validate({
    errorElement: 'p',
    submitHandler: function (form) {
      form.submit();
    },
    errorPlacement: function (error, element) {
      element.after(error);
    },
    rules: {
      name: 'required',
      email: {
        required: true,
        email: true
      },
      phone: 'required',
      message: 'required'
    },
    messages: {
      name: "<?php echo L('refer_yname_validate');?>",
      email: {
        required: "<?php echo L('refer_yemail_validate');?>",
        email: "<?php echo L('refer_yemail_validate');?>"
      },
      phone: "<?php echo L('pleaseinputphone');?>",
      message: "<?php echo L('Please_input_your_message');?>"
    }
  });
});
</script>
<?php include THEMES_PATH.'public/footer2.phtml';?>
<?php include THEMES_PATH.'public/after_body.phtml';?>